<template>
  <div class="register">
    <navigate>新用户注册</navigate>
    <div class="container">
      <van-cell-group class="input_outer">
        <van-field
          v-model="registerInfo.user"
          label="*注册账号"
          placeholder="请输入账号"
        />
      </van-cell-group>
      <van-cell-group class="input_outer">
        <van-field
          v-model="registerInfo.password"
          label="*登录密码"
          placeholder="字母或数字不超过8-18位字符"
        />
      </van-cell-group>
      <van-cell-group class="input_outer">
        <van-field
          v-model="registerInfo.name"
          label="*真实姓名"
          placeholder="请输入"
        />
      </van-cell-group>
      <van-cell-group class="input_outer father_relative">
        <van-field
          readonly
          clickable
          v-model="currentSex.label"
          label="*性别"
          placeholder="选择性别"
          @click="visibleSex = true"
        />
        <v-picker
          :columns="sex"
          valueKey="label"
          @confirm="selectSex"
          :isVisible="visibleSex"
          @cancel="visibleSex = false"
        />
        <img
          src="@/assets/images/common/right.png"
          class="right vertical_center"
          alt=""
        />
      </van-cell-group>
      <van-cell-group class="input_outer">
        <van-field
          v-model="registerInfo.age"
          label="年龄"
          type="number"
          placeholder="请输入"
        />
      </van-cell-group>

      <div class="department">所属单位及部门</div>

      <!-- 区域 -->
      <van-cell-group class="input_outer">
        <van-field
          readonly
          clickable
          label="*所在区域"
          :value="currentArea"
          placeholder="选择区域"
          @click="visibleArea = true"
        />
        <van-popup
          v-model="visibleArea"
          round
          position="bottom"
          close-on-click-overlay
          @click-overlay="resetArea"
        >
          <van-cascader
            v-model="tempArea"
            active-color="#36bfff"
            :options="areaList"
            @close="resetArea"
            @finish="selectArea"
            @change="changeArea"
          />
        </van-popup>
        <img
          src="@/assets/images/common/right.png"
          class="right vertical_center"
          alt=""
        />
      </van-cell-group>
      <!-- 单位 -->
      <van-cell-group class="input_outer">
        <van-field
          readonly
          clickable
          label="*所属单位"
          :value="currentUnit.name"
          placeholder="选择单位"
          @click="checkUnit"
        />

        <van-popup
          v-model="visibleUnit"
          round
          position="bottom"
          close-on-click-overlay
          @click-overlay="resetUnit"
        >
          <van-picker
            title="选择单位"
            show-toolbar
            value-key="name"
            :columns="unitList"
            @confirm="selectUnit"
            @close="resetUnit"
            @cancel="visibleUnit = false"
          />
        </van-popup>

        <img
          src="@/assets/images/common/right.png"
          class="right vertical_center"
          alt=""
        />
      </van-cell-group>

      <van-cell-group class="input_outer">
        <van-field
          readonly
          clickable
          label="*所属部门"
          :value="currentDepartment"
          placeholder="选择部门"
          @click="checkDepartment"
        />
        <van-popup
          v-model="visibleDepartment"
          round
          position="bottom"
          close-on-click-overlay
          @click-overlay="resetDepartment"
        >
          <van-cascader
            v-model="currentDepartment"
            active-color="#36bfff"
            :options="departmentList"
            @close="resetDepartment"
            @finish="selectDepartment"
          />
        </van-popup>
        <img
          src="@/assets/images/common/right.png"
          class="right vertical_center"
          alt=""
        />
      </van-cell-group>
      <van-cell-group class="input_outer">
        <van-field
          v-model="registerInfo.id"
          label="部门内编号"
          type="number"
          placeholder="请输入"
        />
      </van-cell-group>

      <button class="btn" @click="register">完成注册</button>

      <div class="text flex_row flex_align_center nowrap flex_center_jc">
        <checkbox @getCheckboxValue="checkboxStauts = $event"></checkbox>
        <div class="text_content">
          同意<span @click="argumentVisible = true">《用户服务协议》</span
          >和<span @click="privacyVisible = true">《隐私政策》</span>
        </div>
      </div>
    </div>

    <arreement
      @close="argumentVisible = $event"
      :visible="argumentVisible"
    ></arreement>
    <privacy
      @close="privacyVisible = $evnet"
      :visible="privacyVisible"
    ></privacy>
  </div>
</template>

<script>
import { sex } from "@/utils/options.js";
import selectMixin from "@/mixins/selectMixin.js";
import arreement from "./components/agreement.vue";
import privacy from "./components/privacy.vue";
import { apiRegisterUser, queryAreasGetUnitInfo } from "@/api/user";

export default {
  mixins: [selectMixin],
  components: {
    arreement,
    privacy,
  },
  watch: {
    checkboxStauts(nV) {},
  },
  data() {
    return {
      show: false,
      fieldValue: "",
      cascaderValue: "",
      options: [
        {
          text: "浙江省",
          value: "330000",
          children: [],
        },
        {
          text: "湖南省",
          value: "310000",
          children: [],
        },
      ],
      // 协议
      argumentVisible: false,
      // 隐私政策
      privacyVisible: false,
      // 显示选择器
      showPicker: false,
      // 注册信息
      registerInfo: {
        user: "",
        password: "",
        name: "",
        sex: "",
        sexId: "",
        age: "",
        area: "",
        unit: "",
        department: "",
        id: "",
      },
      checkboxStauts: false,
    };
  },
  computed: {
    sex() {
      return sex;
    },
  },
  created() {},
  methods: {
    onFinish({ selectedOptions }) {
      this.show = false;
      this.fieldValue = selectedOptions.map((option) => option.text).join("/");
    },

    async getAreasGetUnitInfo() {},
    // 注册
    async register() {
      if (!this.registerInfo.user) return this.$toast.fail("请输入账号！");
      if (!this.registerInfo.password) return this.$toast.fail("请输入密码！");
      if (this.registerInfo.password.length > 16)
        return this.$toast.fail("请输入密码在16个字符以内！");
      if (!this.registerInfo.name) return this.$toast.fail("请输入姓名！");
      if (!this.currentSex.id) return this.$toast.fail("请选择性别！");
      if (!this.province_id && !this.city_id && !this.area_id)
        return this.$toast.fail("请选择区域！");
      if (!this.currentUnit.id) return this.$toast.fail("请选择单位!");
      if (!this.department) return this.$toast.fail("请选择部门！");
      if (!this.checkboxStauts)
        return this.$toast.fail("请同意服务协议和隐私政策！");
      const params = {
        username: this.registerInfo.user,
        password: this.registerInfo.password,
        name: this.registerInfo.name,
        sex: this.currentSex.id,
        age: this.registerInfo.age,
        unit_id: this.currentUnit.id,
        province_id: this.province_id,
        city_id: this.city_id,
        area_id: this.area_id,
        department_id: this.department,
        user_number: this.registerInfo.id,
      };
      let res = await apiRegisterUser(params);
      if (res.code == 200) {
        this.$toast.success({ message: "账号注册成功！" });
        this.$router.push("/");
      }
    },
    onConfirm() {},
  },
};
</script>

<style lang="less" scoped>
@import "./css/index.less";
</style>
